<template>
    <div class="container">
        <Header v-if="showHeader" @getHeight="getHeight" title="绩效结果"></Header>
        <van-tabs v-model="active" :sticky="sticky" :offset-top="offsetTop" @click="changeTabs">
            <van-tab title="个人绩效">
                <div class="performance_content">
                    <UserInfo :userInfo="userInfo"></UserInfo>
                    <CheckList></CheckList>
                </div>
            </van-tab>
            <van-tab title="下属绩效">
                <div class="top-warp">
                    <FilterData :isDisabled="isDisabled" :organizationTree="organizationTree" @organizationNavs="organizationNavs" :guides="guides" @filterGuides="filterGuides" @filterIsMenber="filterIsMenber"></FilterData>
                    <SortData :sortToolsList="sortToolsList" @sortTable="sortTable"></SortData>
                </div>
                <!--滑动区域 ref='mescroll'不能删, 目的是路由切换时可通过ref调用mescroll-vue组件的beforeRouteEnter方法-->
                <mescroll-vue ref="tableListMescroll" :up="mescrollUp" @init="mescrollInit">
                    <div id="tableList">
                        <TableList :tableList="tableList" fromPage='performanceTabs'></TableList>
                    </div>
                </mescroll-vue>
            </van-tab>
        </van-tabs>
        <Loading v-show = "showLoading"></Loading>
    </div>
</template>
<script>
import MescrollVue from 'mescroll.js/mescroll.vue';
import Header from "@/components/Header.vue";
import Loading from "@/components/Loading.vue";
import FilterData from "@/components/FilterData.vue";
import SortData from "@/components/SortData.vue"
import UserInfo from '@/components/UserInfo.vue'
import CheckList from '@/components/CheckList.vue'
import TableList from '@/components/business/TableList.vue'
import { deepCopy } from "@/plugins/deepCopy.js";
import { profile,checkList,subordinateStaffers,organizations,guides } from "@/request/api.js";
export default {
    name:'PerformanceTabs',
    data() {
        return {
            showHeader:this.$store.state.showHeader,
            showLoading:false,
            offsetTop:0,
            active: this.$store.tabActive,
            sticky:true,
            order_by:'fd_recent_score',
            sort:'desc',
            organic_id:'0',
            guide_code:'All',
            fd_sta_is_official:'',
            num:1,
            limit:10,
            userInfo:{},
            isDisabled:true,
            organizationTree:[],
            guides:[{value: "All", text: "全部"}],
            // pic:require('@/assets/logo.png'),
            checkListData:[
                {
                    id:1,
                    title:'日常考核',
                    list:[
                        {
                            id:101,
                            startTime:'2019-10-18',
                            endTime:'2019-10-31',
                            status:true,
                            totalScores:50,
                            list:[
                                {
                                    id:10101,
                                    title:'用户注册量(手机用户)',
                                    progress:50,
                                    targetScores:20,
                                    scores:10,
                                    desc:'通过本人手机推广新用户点购app，成为点购新用户，手机号码新注册的用户有效；通过本人手机推广新用户点购app，成为点购新用户，手机号码新注册的用户有效',
                                    weight:20,
                                    fullScores:100,
                                    highestScores:200
                                },
                                {
                                    id:10102,
                                    title:'通盟文章转发量',
                                    progress:70,
                                    targetScores:42,
                                    scores:20,
                                    desc:'通盟文章转发量通盟文章转发量；通过本人手机推广新用户点购app，成为点购新用户，手机号码新注册的用户有效',
                                    weight:20,
                                    fullScores:100,
                                    highestScores:200
                                },
                                {
                                    id:10103,
                                    title:'用户注册量(手机用户)',
                                    progress:90,
                                    targetScores:10,
                                    scores:20,
                                    desc:'通过本人手机推广新用户点购app，成为点购新用户，手机号码新注册的用户有效；通过本人手机推广新用户点购app，成为点购新用户，手机号码新注册的用户有效',
                                    weight:20,
                                    fullScores:100,
                                    highestScores:200
                                },
                                {
                                    id:10104,
                                    title:'县导到岗率',
                                    progress:90,
                                    targetScores:20,
                                    scores:20,
                                    desc:'县导到岗率县导到岗率县导到岗率县导到岗率；通过本人手机推广新用户点购app，成为点购新用户，手机号码新注册的用户有效',
                                    weight:20,
                                    fullScores:100,
                                    highestScores:200
                                }
                            ]
                        },
                        {
                            id:102,
                            startTime:'2019-9-18',
                            endTime:'2019-9-31',
                            status:false,
                            totalScores:50,
                            list:[
                                {
                                    id:10201,
                                    title:'用户注册量(手机用户)',
                                    progress:50,
                                    targetScores:20,
                                    scores:10
                                },
                                {
                                    id:10202,
                                    title:'通盟文章转发量',
                                    progress:70,
                                    targetScores:42,
                                    scores:20
                                },
                                {
                                    id:10203,
                                    title:'用户注册量(手机用户)',
                                    progress:90,
                                    targetScores:10,
                                    scores:20
                                },
                                {
                                    id:10204,
                                    title:'县导到岗率',
                                    progress:90,
                                    targetScores:20,
                                    scores:20
                                }
                            ]
                        },
                        {
                            id:103,
                            startTime:'2019-8-18',
                            endTime:'2019-8-31',
                            status:false,
                            totalScores:50,
                            list:[
                                {
                                    id:10301,
                                    title:'用户注册量(手机用户)',
                                    progress:50,
                                    targetScores:20,
                                    scores:10
                                },
                                {
                                    id:10302,
                                    title:'通盟文章转发量',
                                    progress:70,
                                    targetScores:42,
                                    scores:20
                                },
                                {
                                    id:10303,
                                    title:'用户注册量(手机用户)',
                                    progress:90,
                                    targetScores:10,
                                    scores:20
                                },
                                {
                                    id:10304,
                                    title:'县导到岗率',
                                    progress:90,
                                    targetScores:20,
                                    scores:20
                                }
                            ]
                        }
                    ]
                },
                {
                    id:2,
                    title:'综合考核',
                    list:[
                        {
                            id:201,
                            startTime:'2019-10-18',
                            endTime:'2019-10-31',
                            status:true,
                            totalScores:50,
                            list:[
                                {
                                    id:20101,
                                    title:'用户注册量(手机用户)',
                                    progress:50,
                                    targetScores:20,
                                    scores:10,
                                    desc:'通过本人手机推广新用户点购app，成为点购新用户，手机号码新注册的用户有效；通过本人手机推广新用户点购app，成为点购新用户，手机号码新注册的用户有效',
                                    weight:20,
                                    fullScores:100,
                                    highestScores:200
                                },
                                {
                                    id:20102,
                                    title:'通盟文章转发量',
                                    progress:70,
                                    targetScores:42,
                                    scores:20,
                                    desc:'通盟文章转发量通盟文章转发量通盟文章转发量；通过本人手机推广新用户点购app，成为点购新用户，手机号码新注册的用户有效',
                                    weight:20,
                                    fullScores:100,
                                    highestScores:200
                                },
                                {
                                    id:20103,
                                    title:'用户注册量(手机用户)',
                                    progress:90,
                                    targetScores:10,
                                    scores:20,
                                    desc:'通过本人手机推广新用户点购app，成为点购新用户，手机号码新注册的用户有效；通过本人手机推广新用户点购app，成为点购新用户，手机号码新注册的用户有效',
                                    weight:20,
                                    fullScores:100,
                                    highestScores:200
                                },
                                {
                                    id:20104,
                                    title:'县导到岗率',
                                    progress:90,
                                    targetScores:20,
                                    scores:20,
                                    desc:'县导到岗率县导到岗率县导到岗率县导到岗率县导到岗率；通过本人手机推广新用户点购app，成为点购新用户，手机号码新注册的用户有效',
                                    weight:20,
                                    fullScores:100,
                                    highestScores:200
                                }
                            ]
                        },
                        {
                            id:202,
                            startTime:'2019-9-18',
                            endTime:'2019-9-31',
                            status:false,
                            totalScores:50,
                            list:[
                                {
                                    id:20201,
                                    title:'用户注册量(手机用户)',
                                    progress:50,
                                    targetScores:20,
                                    scores:10
                                },
                                {
                                    id:20202,
                                    title:'通盟文章转发量',
                                    progress:70,
                                    targetScores:42,
                                    scores:20
                                },
                                {
                                    id:20203,
                                    title:'用户注册量(手机用户)',
                                    progress:90,
                                    targetScores:10,
                                    scores:20
                                },
                                {
                                    id:20204,
                                    title:'县导到岗率',
                                    progress:90,
                                    targetScores:20,
                                    scores:20
                                }
                            ]
                        },
                        {
                            id:203,
                            startTime:'2019-8-18',
                            endTime:'2019-8-31',
                            status:false,
                            totalScores:50,
                            list:[
                                {
                                    id:20301,
                                    title:'用户注册量(手机用户)',
                                    progress:50,
                                    targetScores:20,
                                    scores:10
                                },
                                {
                                    id:20302,
                                    title:'通盟文章转发量',
                                    progress:70,
                                    targetScores:42,
                                    scores:20
                                },
                                {
                                    id:20303,
                                    title:'用户注册量(手机用户)',
                                    progress:90,
                                    targetScores:10,
                                    scores:20
                                },
                                {
                                    id:20304,
                                    title:'县导到岗率',
                                    progress:90,
                                    targetScores:20,
                                    scores:20
                                }
                            ]
                        }
                    ]
                }
            ],
            sortToolsList:[
                {text:'在职天数',isSort:false,order:'',orderSort:false},
                {text:'历史招单',isSort:true,order:'fd_sta_merchants',orderSort:false},
                {text:'最近得分',isSort:true,order:'fd_recent_score',orderSort:false},
                {text:'当前考核',isSort:true,order:'fd_ongoing_score',orderSort:false},
            ],
            mescroll: null,
            tableList:[],
            mescrollUp: {
                callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
                page: {
                    num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                    limit: 10 //每页数据条数,默认10
                },
                noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
                empty: {
                    // 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才生效;
                    warpId: 'tableList', // 父布局的id;
                    tip: '暂无相关数据~', // 提示
                },
                htmlNodata: '<p class="upwarp-nodata">没有更多了~</p>', // 无数据的布局
            },
        }
    },
    components:{
        MescrollVue,
        Header,
        Loading,
        UserInfo,
        CheckList,
        FilterData,
        SortData,
        TableList,
    },
    created() {
        this.active = this.$store.state.tabActive;
       //个人信息
       profile({token:this.$store.state.token}).then(res=>{
        //    console.log(res);
           this.userInfo = res.data.staffer;
        }).catch(err=>{
            console.log(err)
        });
    },
    mounted(){
        organizations({token:this.$store.state.token}).then(res=>{
            // console.log(res);
            let data = res.data.tree;
            this.organizationTree = deepCopy(data);
            this.organizationTree = JSON.parse(JSON.stringify(this.organizationTree).replace(/name/g, 'label'));
            this.organizationTree = JSON.parse(JSON.stringify(this.organizationTree).replace(/id/g, 'value'));
            this.organizationTree = JSON.parse(JSON.stringify(this.organizationTree).replace(/pvalue/g, 'pid'));
            // console.log(this.organizationTree)
            this.isDisabled = false;
        }).catch(error=>{
            console.log(error)
        })
        guides({token:this.$store.state.token}).then(res=>{
            // console.log(res);
            let data = res.data.guides;
            data = JSON.parse(JSON.stringify(data).replace(/name/g, 'text'));
            data = JSON.parse(JSON.stringify(data).replace(/code/g, 'value'));
            this.guides = this.guides.concat(data)
            // console.log(this.guides)
        }).catch(error=>{
            console.log(error)
        })
    },
    methods: {
        getHeight(val){
            return this.offsetTop = val;
        },
        //tab切换
        changeTabs(name,title){
            // console.log(name,title);
            this.$store.commit('setTabActive',name)
        },
        // mescroll组件初始化的回调,可获取到mescroll对象
        mescrollInit (mescroll) {
            this.mescroll = mescroll
        },
        // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
        upCallback (page,mescroll) {
            // console.log(page)
            // 联网加载数据
            subordinateStaffers({
                token:this.$store.state.token,
                sort:this.sort,
                order_by:this.order_by,
                organic_id:this.organic_id,
                guide_code:this.guide_code,
                fd_sta_is_official:this.fd_sta_is_official,
                page:page.num,
                per_page:page.limit
            }).then(res=>{
                let list = res.data;
                // console.log(list)
                if (page.num==1) {
                    this.tableList = list.staffers;
                } else {
                    this.tableList = this.tableList.concat(list.staffers);
                }
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.$nextTick(() => {
                    mescroll.endSuccess(list.staffers.length)
                })
            }).catch(error=>{
                console.log(error);
                mescroll.endErr()
            })
        },
        //排序
        sortTable(data){
            this.showLoading = true;
            this.num = 1;
            console.log(data)
            this.order_by = data.order;
            this.sort = data.order_type;
            subordinateStaffers({
                token:this.$store.state.token,
                sort:this.sort,
                order_by:this.order_by,
                organic_id:this.organic_id,
                guide_code:this.guide_code,
                fd_sta_is_official:this.fd_sta_is_official,
                page:this.num,
                per_page:this.limit
            }).then(res=>{
                let list = res.data;
                // console.log(list)
                this.tableList = list.staffers;
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.showLoading = false;
            }).catch(error=>{
                console.log(error);
                this.showLoading = false;
            })
        },
        //组织过滤
        organizationNavs(data){
            this.showLoading = true;
            if (data.length) {
                this.organic_id = data[[data.length-1]].value;
            }else{
                this.organic_id = '0'
            };
            this.num = 1;
            subordinateStaffers({
                token:this.$store.state.token,
                sort:this.sort,
                order_by:this.order_by,
                organic_id:this.organic_id,
                guide_code:this.guide_code,
                fd_sta_is_official:this.fd_sta_is_official,
                page:this.num,
                per_page:this.limit
            }).then(res=>{
                let list = res.data;
                // console.log(list)
                this.tableList = list.staffers;
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.showLoading = false;
            }).catch(error=>{
                console.log(error);
                this.showLoading = false;
            })
        },
        // 筛选店导
        filterGuides(data){
            this.showLoading = true;
            this.guide_code = data;
            this.num = 1;
            subordinateStaffers({
                token:this.$store.state.token,
                sort:this.sort,
                order_by:this.order_by,
                organic_id:this.organic_id,
                guide_code:this.guide_code,
                fd_sta_is_official:this.fd_sta_is_official,
                page:this.num,
                per_page:this.limit
            }).then(res=>{
                let list = res.data;
                // console.log(list)
                this.tableList = list.staffers;
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.showLoading = false;
            }).catch(error=>{
                console.log(error);
                this.showLoading = false;
            })
        },
        //是否转正
        filterIsMenber(data){
            this.showLoading = true;
            this.fd_sta_is_official = data;
            this.num = 1;
            subordinateStaffers({
                token:this.$store.state.token,
                sort:this.sort,
                order_by:this.order_by,
                organic_id:this.organic_id,
                guide_code:this.guide_code,
                fd_sta_is_official:this.fd_sta_is_official,
                page:this.num,
                per_page:this.limit
            }).then(res=>{
                let list = res.data;
                // console.log(list)
                this.tableList = list.staffers;
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.showLoading = false;
            }).catch(error=>{
                console.log(error);
                this.showLoading = false;
            })
        }
    },
    beforeRouteLeave  (to, from, next) {
        if(to.name=='myPerformance'){this.active=1;this.$store.commit('setTabActive',1)}  
        next();
    },
}
</script>
<style lang="less" scoped>
.top-warp{
    z-index: 999;
    position: fixed;
    top: 44px;
    left: 0;
    width: 100%;
    height: 88px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}
/*以fixed的方式固定mescroll的高度*/
  .mescroll {
    position: fixed;
    top: 132px;
    bottom: 0;
    height: auto;
  }
/deep/ .van-tabs--line .van-tabs__wrap{height: 44px;}
/deep/ .van-tabs__nav--line{padding-bottom: 0;}
/deep/ .van-tab{font-size: 17px;line-height: 44px;color: #666;}
/deep/ .van-tab--active{color: #ff661a}
/deep/ .van-tabs__line{background-color: rgba(255,102,26,.5);bottom: 0;}
.performance_content{padding: 10px 20px;}
/deep/ .van-tabs__content{padding: 0;}
    
</style>